<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        {{ $t('route.resource') }}
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            :pageMethod="(params) => {
              params.search = searchValue;
              if (tableSearch) {
                      params.page = 1;
                      tableSearch = false;
                    }
              return $pandaApi.apiGetResourceList(params);
            }"
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button type="primary" class="icon-button setting-button" style="width: auto;" @click="$refs['PoolFormDialop'].init('create')">
                  <i class="iconfont iconzhongyiicon_chuangjian" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('common.Create') }}</span>
                </el-button>
                <el-button class="icon-button setting-button" style="width: auto; margin-left: 10px;" @click="batchDelete(tableSlotData.table.selectRows)" :disabled="tableSlotData.table.selectRows.length <= 0">
                  <i class="el-icon-delete" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('common.BatchDelete') }}</span>
                </el-button>
              </div>
              <div class="table-right-options">
                <el-input :placeholder="$t('resource.searchPlaceholder')" @keyup.enter.native="tableSearchChange(tableSlotData)" v-model="searchValue" style="width:200px" >
                </el-input>
                <el-button @click="tableSearchChange(tableSlotData)" type="primary" style="margin-left: 10px;" >{{ $t('common.search') }}</el-button>
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column type="selection" width="40" align="center"></el-table-column>
              <el-table-column
                prop="name"
                :label="$t('common.name')"
                width="180"
                sortable
              >
                <template #default="props">
                  <link-button :content="props.row.name" :isName="true" :size="10" :font-size="'12px'" @click="$router.push({
                    name: 'PoolDetail',
                    query: {
                      poolid: JSON.stringify(props.row.id)
                    }
                  })" />
                </template>
              </el-table-column>
              <el-table-column
                prop="horizon_resources"
                :label="$t('resource.horizon')"
                width="200">
              </el-table-column>
              <el-table-column
                prop="daas_resources"
                :label="$t('resource.daas')"
                width="200">
              </el-table-column>
              <el-table-column
                prop="desktops"
                :label="$t('common.desktop')"
                width="180">
              </el-table-column>
              <el-table-column
                prop="description"
                :label="$t('common.description')">
              </el-table-column>
              <el-table-column
                :label="$t('common.action')"
                width="240"
              >
                <template #default="props">
                  <link-button :content="$t('resource.resourceManage')" style="margin-right:10px" :size="10" :font-size="'12px'" @click="$router.push({
                    name: 'PoolDetail',
                    query: {
                      poolid: JSON.stringify(props.row.id)
                    }
                  })" />
                  <el-dropdown>
                    <el-button type="text" class="el-dropdown-link">
                      {{ $t("common.More")
                      }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        @click.native="$refs['PoolFormDialop'].init('edit', props.row)"
                        >{{
                          $t('common.edit')
                        }}</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click.native="deleteRow(props.row)"
                        >{{
                          $t('common.delete')
                        }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <pool-form-dialop ref="PoolFormDialop" :submit-method="(type, data) => {
                return createOrEditResourcePool(type, data, tableSlotData);
              }" />
              <password-delete-dialog ref="PasswordDeleteDialog" :delete-method="(resourceList) => $pandaApi.apiBatchDeleteResourcePool(resourceList).then(() => {
                if(isBatch) {
                  $message({
                    message: $t('desktopManage.message.operationSuccess', {operation: $t('resource.BatchDeletePoolTitle') }).toString(),
                    type: 'success'
                  });
                } else {
                  $message({
                    message: $t('desktopManage.message.operationSuccess', {operation: $t('resource.DeletePoolTitle') }).toString(),
                    type: 'success'
                  });
                }
                
                tableSlotData.table.deleteRefresh(resourceList.length);
              }).catch(() => {
                if(isBatch) {
                  $message({
                    message: $t('desktopManage.message.operationFail', { operation: $t('resource.BatchDeletePoolTitle') }).toString(),
                    type: 'warning'
                  });
                }else {
                  $message({
                    message: $t('desktopManage.message.operationFail', { operation: $t('resource.DeletePoolTitle') }).toString(),
                    type: 'warning'
                  });
                }
                
              })" />
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../components/Basic/Table/BasicTable.vue';
import LinkButton from '../../components/Basic/Button/LinkButton.vue';
import PoolFormDialop from './components/PoolFormDialop.vue';
import PasswordDeleteDialog from './components/PasswordDeleteDialog.vue';
export default Vue.extend({
  components: {
    BasicTable,
    PoolFormDialop,
    LinkButton,
    PasswordDeleteDialog
  },
  data() {
    return {
      searchValue: "",
      isBatch: false,
      tableSearch: false
    };
  },
  methods: {
    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
    batchDelete(selectRows: Array<any>) {
      this.isBatch = true;
      (this as any).$refs.PasswordDeleteDialog.init({
        title: (this as any).$t('resource.BatchDeletePoolTitle'),
        tip: (this as any).$t('resource.batchDeletePoolTip'),
        message: (this as any).$t('resource.batchDeletePoolMessage'),
        resourceList: selectRows
      });
    },
    deleteRow(row: any) {
      this.isBatch = false;
      (this as any).$refs.PasswordDeleteDialog.init({
        title: (this as any).$t('resource.DeletePoolTitle', row),
        tip: (this as any).$t('resource.deletePoolTip', row),
        message: (this as any).$t('resource.deletePoolMessage', row),
        resourceList: [row]
      });
    },
    createOrEditResourcePool(type: any, data: any, table: any) {
      if (type === 'create') {
        return (this as any).$pandaApi.apiPostResourceList(data).then((res: any) => {
          if (res.error && res.msg.pool_code.length > 0 && res.msg.pool_code[0] === '具有 pool code 的 resource pool 已存在。') {
            (this as any).$message({
              message: (this as any).$t('resource.poolCodeOccupied').toString(),
              type: 'warning'
            });
          } else {
            (this as any).$message({
              message: (this as any).$t('desktopManage.message.operationSuccess', { operation: (this as any).$t('resource.createResourcePool') }).toString(),
              type: 'success'
            });
            (this as any).$refs['PoolFormDialop'].handleClose();
            table.table.refresh();
          }
        }).catch(() => {
          (this as any).$message({
            message: (this as any).$t('desktopManage.message.operationFail', { operation: (this as any).$t('resource.createResourcePool') }).toString(),
            type: 'warning'
          });
        });
      } else {
        return (this as any).$pandaApi.apiPutResourceList(data.id, data).then((res: any) => {
          if (res.error && res.msg.pool_code.length > 0 && res.msg.pool_code[0] === '具有 pool code 的 resource pool 已存在。') {
            (this as any).$message({
              message: (this as any).$t('resource.poolCodeOccupied').toString(),
              type: 'warning'
            });
          } else {
            (this as any).$message({
                message: (this as any).$t('desktopManage.message.operationSuccess', {operation: (this as any).$t('resource.editResourcePool') }).toString(),
                type: 'success'
              });
            (this as any).$refs['PoolFormDialop'].handleClose();
            table.table.refresh();
          }
        }).catch(() => {
         (this as any). $message({
            message: (this as any).$t('desktopManage.message.operationFail', { operation: (this as any).$t('resource.editResourcePool') }).toString(),
            type: 'warning'
          });
        });
      }
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}

.delete-warning-icon {
  color: #FF931D;
  font-size: 20px;
  margin-right: 10px;

  &::before {
    font-size: 20px;
  }
}
</style>
